<template>
	<view class="logistics">
		<view class="mess">
			<view class="commodity" v-for="(item,index) in lists" :key="index" @tap="navigateTo(item.id)">
				<image mode="widthFix" :src="item.license_plate_picture" />
				<view class="shops">
					<view class="clxx">
						<view>
							<span class="sp1">{{item.license_plate}}</span>
							<span class="sp2">{{item.vehicle_information_name}}</span>
							<span>{{item.vehicle_color}}</span>
						</view>
						<view>
							<span>车厢长宽高：</span>
							<span style="padding: 0;">{{item.lasting}}*{{item.wide}}*{{item.high}}米</span>
						</view>
						<view>
							<span>{{item.contacts}}</span>
							<span class="sp2">{{item.telephone}}</span>
						</view>
					</view>
					<view class="operate">
						<view class="zt">
							<span>起¥{{item.vehicle_price}}/{{item.starting_kilometers}}km 超¥{{item.mark_up}}/公里</span>
						</view>
						<view v-if="item.logistics_status == 1" class="zt" :class="{zt_active : item.logistics_status == 1}">
							<view class="dian"  :class="{dian_active : item.logistics_status == 1}"></view>
							<span>运输中</span>
						</view>
						<view v-if="item.logistics_status == 2" class="zt" :class="{zt_active : item.logistics_status == 1}">
							<view class="dian"  :class="{dian_active : item.logistics_status == 1}"></view>
							<span>空闲中</span>
						</view>
					</view>
				</view>
			</view>
			<view class="list_bots" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
		<!-- 添加车辆 -->
		<view class="buts">
			<view class="service" @click="addCl">
				<span class="sp2">添加车辆</span>
			</view>
		</view>
	</view>
</template>

<script>
	import { findByUserId } from '@/utils/api.js';
	export default {
		data() {
			return {
				// 车辆信息
				lists:[],
				loadMoreText: "加载中...",
				showLoadMore: false,
				// 最大值
				max: 5,
				// 页数
				current:1,
				// 每页数量
				pageSize:10
			}
		},
		onShow(){
			this.initData();
		},
		onLoad() {
			// this.initData();
		},
		// 监听页面卸载
		onUnload() {
			this.max = 0,
			this.lists = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			this.current=1,
			this.pageSize=5
		},
		// 页面滚动到底部的事件
		onReachBottom() {
			console.log("onReachBottom");
			if (this.lists.length > this.max || this.loadMoreText=='没有更多车辆了!') {
				this.loadMoreText = "没有更多车辆了!"
				return;
			}
			this.showLoadMore = true;
			this.current+=1
			setTimeout(() => {
				this.setListData();
			}, 300);
		},
		// 监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			// 获取车辆数据
			initData(){
				// 获取车辆数据
				findByUserId({
					current:this.current,
					pageSize:this.pageSize
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res);
						this.lists=res.data
						if(this.lists.length < 5){
							this.showLoadMore = true;
							this.loadMoreText = "没有更多车辆了!"
						}
						uni.stopPullDownRefresh();
				    } else {
						uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
						uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 下拉加载数据
			setListData() {
				let data = [];
				// 获取店铺数据
				findByUserId({
					current:this.current,
					pageSize:this.pageSize
				}).then((res) => {
				    if (res.code === 200) {
				      // console.log(res);
					  data=res.data
					  if(data.length < 5){
					  	this.showLoadMore = true;
					  	this.loadMoreText = "没有更多车辆了!"
					  }
					  this.lists = this.lists.concat(data);
				    } else {
				      uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			
			
			
			
			
			// 查看商品详情
			navigateTo(id) {
				uni.navigateTo({
					url: 'vehicle?id='+id
				})
			},
			rob(id){
				console.log(id);
			},
			addCl(){
				uni.navigateTo({
					url: 'add_cl?clic=add'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
		.logistics{
			.mess{
				padding: 10px;
				.commodity{
					height: 120px;
					background: #FFFFFF;
					margin-bottom: 10px;
					border-radius: 10px;
					display: flex;
					align-items: center;
					image{
						width: 100px !important;
						height: 100px !important;
						margin: 0 0 0 10px;
						border-radius: 8px;
					}
					.shops{
						// -webkit-flex: 1;
						// flex: 1;
						height: 100px;
						padding: 0 10px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.clxx{
							height: 64px;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							view{
								font-size: 14px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: $text;
								line-height: 17px;
								.sp1{
									font-size: 18px;
									font-weight: 600;
									color: $mainText;
									line-height: 22px;
								}
								.sp2{
									margin: 0 6px;
								}
							}
							
						}
						.operate{
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							.zt{
								font-size: 14px;
								font-family: PingFangSC-Regular, PingFang SC;
								color: #1E9B5E;
								line-height: 36px;
								display: flex;
								align-items: center;
								.dian{
									width: 5px;
									height: 5px;
									background-color: #1E9B5E;
									border-radius: 50px;
								}
								.dian_active{
									background-color: #FF2B2B;
								}
								span{
									width: 100%;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									word-break: break-all;
									font-weight: 400;
									// padding: 0 5px;
								}
							}
							.zt_active{
								color: #FF2B2B;
								font-size: 14px;
							}
							.qiang{
								width: 80px;
								height: 36px;
								background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
								border-radius: 10px;
								font-size: 15px;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
								line-height: 36px;
								text-align: center;
							}
						}
					}
				}
				.list_bots{
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: $mainText;
					line-height: 30px;
					text-align: center;
				}
			}
			// 添加车辆
			.buts{
				width: 100%;
				height: 56px;
				position: fixed;
				bottom: 5%;
				.service{
					width: 90%;
					height: 56px;
					margin: 0 auto;
					background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
					box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
					border-radius: 28px;
					display: flex;
					justify-content: center;
					align-items: center;
					.sp2{
						font-size: 18px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56px;
						padding: 0 5px;
					}
				}
			}
		}
	
</style>
